import type React from "react";
import { cn } from "@/client/lib/utils";

interface NotFoundProps {
  message: string;
  className?: string;
  vertical?: boolean;
  noBorder?: boolean;
}

export function NotFound({
  message,
  className = "",
  vertical,
  noBorder,
}: NotFoundProps) {
  return (
    <div
      className={cn(`mt-2  rounded-md p-6 ${className}`, !noBorder && "border")}
    >
      <p
        className={cn(
          "text-sm text-muted-foreground flex items-center gap-4",
          vertical && "flex-col"
        )}
      >
        <svg
          width="40"
          height="40"
          viewBox="0 0 273 273"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          className="flex-shrink-0"
        >
          <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <g
              transform="translate(5.320900, 5.320900)"
              fillRule="nonzero"
              className="stroke-black dark:stroke-white"
              strokeWidth="4"
            >
              <path d="M49.953025,-2.10854389 C63.26892,-2.21867124 76.6185256,2.70621155 86.9019463,12.6653164 L86.9019463,12.6653164 L87.505627,13.2592944 C97.5154947,23.2654892 102.640454,36.3074513 102.880738,49.4222247 C103.08932,77.4533067 113.877287,105.391753 135.242867,126.757333 C156.613383,148.127849 184.559216,158.914875 212.568138,159.119313 L212.568138,159.119313 L213.212264,159.134159 C225.843948,159.517566 238.363557,164.434972 248.121998,173.886137 L248.121998,173.886137 L248.725621,174.480088 C258.982114,184.732164 264.11035,198.171134 264.11035,211.6101 C264.11035,225.04592 258.984514,238.481745 248.732867,248.732867 C238.592792,258.872942 225.336706,263.997882 212.046872,264.107794 C198.731075,264.21792 185.381569,259.293085 175.098248,249.334078 L175.098248,249.334078 L174.494602,248.740134 C163.75802,238.008189 158.640853,223.784027 159.143413,209.719372 C158.258245,182.640933 147.489786,155.83332 126.828333,135.171867 C106.351297,114.694831 79.8363505,103.934873 53.0237258,102.891841 L53.0237258,102.891841 L52.2811438,102.865674 C38.4791718,103.347421 24.5325234,98.4328111 13.8776628,88.1140866 L13.8776628,88.1140866 L13.2739843,87.5201168 C3.12895117,77.3789607 -1.9984796,64.1195994 -2.10841888,50.8264755 C-2.21854669,37.5105567 2.70635908,24.1609269 12.6655135,13.8774565 L12.6655135,13.8774565 L13.2594878,13.2737797 C23.4005926,3.12880025 36.659927,-1.99860507 49.953025,-2.10854389 Z" />
              <circle cx="50" cy="212.0001" r="52.5" />
              <circle cx="212.0001" cy="50" r="52.5" />
            </g>
          </g>
        </svg>
        {message}
      </p>
    </div>
  );
}
